<template>
  <div>
    <mt-header fixed title="分类">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
      <mt-button slot="right">
        <router-link to="/search">搜索</router-link>
      </mt-button>
    </mt-header>
    <div class="content">
      <div class="left">
        <mt-navbar v-model="selected" class="tabnav">
          <mt-tab-item :id="val.id" v-for="val in cateList" :key="val.id">
            {{val.categoryName}}</mt-tab-item>
        </mt-navbar>
      </div>
      <div class="right">
        <mt-tab-container v-model="selected" class="right-t">
          <mt-tab-container-item :id="val.id" v-for="val in cateList" :key="val.id">
            <h4>{{val.categoryName}}</h4>
          </mt-tab-container-item>
        </mt-tab-container>
        <div class="right-b">
          <div class="fenlei-img">
            <img src="../assets/brand1.png">
            <h6>品牌1</h6>
          </div>
          <div class="fenlei-img">
            <img src="../assets/brand2.png">
            <h6>品牌2</h6>
          </div>
          <div class="fenlei-img">
            <img src="../assets/brand3.png">
            <h6>品牌3</h6>
          </div>
          <div class="fenlei-img">
            <img src="../assets/brand4.png">
            <h6>品牌4</h6>
          </div>
          <div class="fenlei-img">
            <img src="../assets/brand5.png">
            <h6>品牌5</h6>
          </div>
          <div class="fenlei-img">
            <img src="../assets/brand6.png">
            <h6>品牌6</h6>
          </div>
          <div class="fenlei-img">
            <img src="../assets/brand7.png">
            <h6>品牌7</h6>
          </div>
          <div class="fenlei-img">
            <img src="../assets/brand8.png">
            <h6>品牌8</h6>
          </div>
        </div>
      </div>
    </div>
    <mt-tabbar class="footer" fixed>
      <mt-tab-item id="index">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/">首页</router-link>
      </mt-tab-item>
      <mt-tab-item id="sort" class="active">
        <img src="../assets/icon2.png" slot="icon">
        <router-link to="/sort">分类</router-link>
      </mt-tab-item>
      <mt-tab-item id="shoppingCar">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/shoppingCar">购物车</router-link>
      </mt-tab-item>
      <mt-tab-item id="member">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/member">会员中心</router-link>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {

  data () {
    return {
      cateList: [
        {id: 1, categoryName: '分类1'},
        {id: 2, categoryName: '分类2'},
        {id: 3, categoryName: '分类3'},
        {id: 4, categoryName: '分类4'},
        {id: 5, categoryName: '分类5'},
        {id: 6, categoryName: '分类6'},
        {id: 7, categoryName: '分类7'},
        {id: 8, categoryName: '分类8'},
        {id: 9, categoryName: '分类9'},
        {id: 10, categoryName: '分类10'},
        {id: 11, categoryName: '分类11'},
        {id: 12, categoryName: '分类12'},
        {id: 13, categoryName: '分类13'},
        {id: 14, categoryName: '分类14'}
      ],
      selected: 1
    }
  },

  methods: {
  },

  created () {
  }
}
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.footer a,
.mint-header a {
  color: white;
  text-decoration: none;
}
.content {
  width: 100%;
  display: flex;
}
.left {
  margin-top: 40 / 16rem;
  margin-bottom: 55 / 16rem;
  flex: 1;
}
.right {
  overflow: hidden;
  flex: 3;
  background-color: #ddd;
}
.mint-navbar {
  background-color: #fff;
  text-align: center;
}
.mint-cell-wrapper {
  padding: 0;
  border:none;
}
.mint-cell {
  text-align: center;
}
.mint-tabbar {
  background-color: #0094ff;
}
.right {
  margin-top: 40 / 16rem;
  padding: 10 / 16rem;
}
.right-t {
  text-align: center;
  margin-bottom: 10 / 16rem;
}
.right-t h4 {
  font-weight: 400;
}
.right-b {
  display: flex;
  flex-wrap: wrap;
}
.fenlei-img {
  width: 32%;
  text-align: center;
  padding: 1 / 16rem;
}
.fenlei-img img {
  width: 100%;
}
.active a {
  color: orange;
}
.tabnav {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  a {
    width: 100%;
    color: #000;
  }
}
</style>
